<!DOCTYPE html>
<!-- http://192.168.4.10:8080/test/tianditu/index.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MyMap Layer Example</title>
<link rel="stylesheet"
	href="/openlayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet"
	href="/openlayers-2.13.1/theme/default/google.css" type="text/css">
<link rel="stylesheet" href="/openlayers-2.13.1/examples/style.css"
	type="text/css">
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="/openlayers-2.13.1/lib/OpenLayers.js"></script>
<script src="/openlayers-2.13.1/lib/deprecated.js"></script>
<script src=http://api.51ditu.com/js/maps.js></script>
<script>
	var map;
	function init() {
		OpenLayers.ProxyHost = "/cgi/proxy.cgi?url=";
		map = new OpenLayers.Map('map');

		var gphy = new OpenLayers.Layer.Google("谷歌物理图", {
			type : google.maps.MapTypeId.TERRAIN
		});
		var gmap = new OpenLayers.Layer.Google("谷歌街道图", {
			numZoomLevels : 20
		});
		var ghyb = new OpenLayers.Layer.Google("谷歌混合图", {
			type : google.maps.MapTypeId.HYBRID,
			numZoomLevels : 20
		});
		var gsat = new OpenLayers.Layer.Google("谷歌卫星图", {
			type : google.maps.MapTypeId.SATELLITE,
			numZoomLevels : 22
		});

		var lmap = new OpenLayers.Layer.Ditu51("灵图街道图", {});

		var mmap = new OpenLayers.Layer.Mapabc("MapABC", {});

		var tdt = new OpenLayers.Layer.Tianditu("街道图", {});

		var tdtm = new OpenLayers.Layer.TiandituMark("中文标记", {});
		
		var tdts = new OpenLayers.Layer.TiandituSatellite("卫星图",{});

		var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
		renderer = (renderer) ? [ renderer ]
				: OpenLayers.Layer.Vector.prototype.renderers;

		var wfs = new OpenLayers.Layer.Vector("WFS示例", {
			strategies : [ new OpenLayers.Strategy.Fixed() ],
			projection : new OpenLayers.Projection("EPSG:4326"),
			visibility : false,
			renderers : renderer,
			styleMap : new OpenLayers.StyleMap({
				'default' : {
					strokeColor : "#00FF00",
					strokeOpacity : 1,
					strokeWidth : 3,
					fillColor : "#FF5500",
					fillOpacity : 0.5,
					pointRadius : 6,
					pointerEvents : "visiblePainted",
					//label : "${name}",

					fontSize : "18px",
					fontFamily : "宋体",
					fontWeight : "bold",
					labelAlign : "left",
					labelXOffset : "${xOffset}",
					labelYOffset : "${yOffset}",
					labelOutlineColor : "red",
					labelOutlineWidth : 1
				}
			}),
			protocol : new OpenLayers.Protocol.WFS({
				version : "1.0.0",
				url : "http://192.168.4.200:8080/geoserver/postgis/wfs",
				featureType : "movie",
				featurePrefix : "postgis",
				featureNS : "http://192.168.4.200:8080/postGis",
				srsName : "EPSG:4326",
				geometryName : "the_geom"
			})
		});
		selected = function(evt) {
			document.getElementById('result').innerHTML = "<font size='6' color='red'>你选择的兴趣点："
					+ evt.feature.data.name
					+ " <br>经度："
					+ evt.feature.data.longitude
					+ " <br>纬度："
					+ evt.feature.data.latitude + "</font>";
			longitude
		}
		wfs.events.register("featureselected", wfs, selected);
		var control = new OpenLayers.Control.SelectFeature(wfs, {
			clickout : true,
			toggle : true,
			multiple : false,
			hover : false,
			toggleKey : "ctrlKey", // ctrl key removes from selection
			multipleKey : "shiftKey", // shift key adds to selection
			box : false
		});
		map.addControl(control);
		control.activate();

		var beijing = new OpenLayers.Layer.Vector("北京行政区", {
			strategies : [ new OpenLayers.Strategy.Fixed() ],
			projection : new OpenLayers.Projection("EPSG:4326"),
			visibility : false,
			renderers : renderer,
			styleMap : new OpenLayers.StyleMap({
				'default' : {
					strokeColor : "#00FF00",
					strokeOpacity : 1,
					strokeWidth : 3,
					fillColor : "#FF5500",
					fillOpacity : 0.5,
					pointRadius : 6,
					pointerEvents : "visiblePainted",
					//label : "${name}",

					fontSize : "18px",
					fontFamily : "宋体",
					fontWeight : "bold",
					labelAlign : "left",
					labelXOffset : "${xOffset}",
					labelYOffset : "${yOffset}",
					labelOutlineColor : "red",
					labelOutlineWidth : 1
				}
			}),
			protocol : new OpenLayers.Protocol.WFS({
				version : "1.0.0",
				url : "http://192.168.4.200:8080/geoserver/postgis/wfs",
				featureType : "beijing_province_2006",
				featurePrefix : "postgis",
				featureNS : "http://192.168.4.200:8080/postGis",
				srsName : "EPSG:4326",
				geometryName : "the_geom"
			})
		});
		selectedbeijing = function(evt) {
			document.getElementById('result').innerHTML = "<font size='10' color='red'>你选择的区域："
					+ evt.feature.data.cnty_nm + "</font>";
		}
		beijing.events.register("featureselected", null, selectedbeijing);
		var controlbeijing = new OpenLayers.Control.SelectFeature(beijing, {
			clickout : true,
			toggle : true,
			multiple : false,
			hover : false,
			toggleKey : "ctrlKey", // ctrl key removes from selection
			multipleKey : "shiftKey", // shift key adds to selection
			box : false
		});
		map.addControl(controlbeijing);
		controlbeijing.activate();

		var bj = new OpenLayers.Layer.WMS("混合图层",
				"http://192.168.4.200:8080/geoserver/wms", {
					LAYERS : 'beijing',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});
		var gml = new OpenLayers.Layer.Vector(
				"GML图层",
				{
					protocol : new OpenLayers.Protocol.HTTP(
							{
								url : "http://192.168.4.200:8080/geoserver/postgis/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=postgis:prc_popplaces&maxFeatures=500",
								format : new OpenLayers.Format.GML()
							}),
					strategies : [ new OpenLayers.Strategy.Fixed() ],
					visibility : false
				});

		var china_popplaces = new OpenLayers.Layer.WMS("全国地区分布",
				"http://192.168.4.200:8080/geoserver/postgis/wms", {
					LAYERS : 'postgis:prc_popplaces',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});

		var drawControls = {
			point : new OpenLayers.Control.DrawFeature(wfs,
					OpenLayers.Handler.Point),
			line : new OpenLayers.Control.DrawFeature(wfs,
					OpenLayers.Handler.Path),
			polygon : new OpenLayers.Control.DrawFeature(wfs,
					OpenLayers.Handler.Polygon)
		};
		for ( var key in drawControls) {
			map.addControl(drawControls[key]);
		}
		toggleControl = function(element) {
			for (key in drawControls) {
				var control = drawControls[key];
				if (element.value == key && element.checked) {
					control.activate();
				} else {
					control.deactivate();
				}
				if (element.value == "cancel") {
					control.deactivate();
				}
			}
		};

		getMarker = function(lng, lat, name, open) {
			var marker = new OpenLayers.Marker(new OpenLayers.LonLat(lng, lat)
					.transform(new OpenLayers.Projection("EPSG:4326"), map
							.getProjectionObject()))
			marker.events.remove("mousedown");
			popupClass = OpenLayers.Popup.FramedCloud;
			popupContentHTML = name;
			feature = new OpenLayers.Feature(markers, marker.lonlat);
			feature.closeBox = true;
			feature.popupClass = popupClass;
			feature.data.popupContentHTML = popupContentHTML;
			feature.data.autoSize = true;
			var popup = feature.createPopup(feature.closeBox);
			map.addPopup(popup);
			if (!open) {
				popup.hide();
			}
			var markerClick = function(evt) {
				popup.toggle();
				OpenLayers.Event.stop(evt);
			};
			marker.events.register("mousedown", feature, markerClick);
			return marker;
		};

		map.addLayers([ gphy, gsat,china_popplaces, gml, beijing, bj, wfs, tdt, tdtm, tdts ]);
		map.setCenter(new OpenLayers.LonLat(116.31444444444445,
				39.96055555555556).transform(new OpenLayers.Projection(
				"EPSG:4326"), map.getProjectionObject()), 10);
		map.addControl(new OpenLayers.Control.LayerSwitcher());

		var markers = new OpenLayers.Layer.Markers("我的自定义点");
		markers.addMarker(getMarker(120.142, 30.1714, "曹志富", false));
		markers.addMarker(getMarker(111.6626, 40.8172, "冯晓婷", false));
		markers.addMarker(getMarker(116.3144, 39.9605, "胡文华", false));
		map.addLayer(markers);

		map.setCenter(new OpenLayers.LonLat(116.3144, 39.9605).transform(
				new OpenLayers.Projection("EPSG:4326"), map
						.getProjectionObject()), 10);

		china_popplaces.events
				.register(
						'visibilitychanged',
						null,
						function(ee) {
							var visibility = ee.object.getVisibility();
							if (visibility) {
								map.events
										.register(
												'click',
												null,
												function(e) {
													document
															.getElementById('shortdesc').innerHTML = "Loading... please wait...";
													var params = {
														REQUEST : "GetFeatureInfo",
														EXCEPTIONS : "application/vnd.ogc.se_xml",
														BBOX : map.getExtent()
																.toBBOX(),
														SERVICE : "WMS",
														INFO_FORMAT : 'text/html',
														QUERY_LAYERS : map.layers[6].params.LAYERS,
														FEATURE_COUNT : 50,
														Layers : 'postgis:prc_popplaces',
														WIDTH : map.size.w,
														HEIGHT : map.size.h,
														format : "image/png",
														styles : map.layers[6].params.STYLES,
														srs : map.layers[6].params.SRS
													};
													if (map.layers[6].params.VERSION == "1.3.0") {
														params.version = "1.3.0";
														params.j = e.xy.x;
														params.i = e.xy.y;
													} else {
														params.version = "1.1.1";
														params.x = Math
																.floor(e.xy.x);
														params.y = Math
																.floor(e.xy.y);
													}

													if (map.layers[6].params.CQL_FILTER != null) {
														params.cql_filter = map.layers[6].params.CQL_FILTER;
													}
													if (map.layers[6].params.FILTER != null) {
														params.filter = map.layers[6].params.FILTER;
													}
													if (map.layers[6].params.FEATUREID) {
														params.featureid = map.layers[6].params.FEATUREID;
													}
													OpenLayers
															.loadURL(
																	"http://192.168.4.200:8080/geoserver/postgis/wfs",
																	params,
																	this,
																	setHTML,
																	setHTML);
													OpenLayers.Event.stop(e);
												});
							} else {
								map.events.remove('click');
							}
							OpenLayers.Event.stop(ee);
						});

	}
	setHTML = function(response) {
		document.getElementById('shortdesc').innerHTML = "Demonstrate use the Mapabc/Amap/Google/Ditu51/Soso Maps API.";
		document.getElementById('result').innerHTML = response.responseText;
	};
</script>
<style>
.smallmap {
	width: 630px;
	height: 396px;
	border: 1px solid #CCC;
}
</style>
</head>
<body onload="init()">
	<h1 id="title">地图2.0版-天地图测试</h1>
	<div id="tags">tianditu, api key, apikey, light</div>
	<p id="shortdesc">Demonstrate use the openlayers api.</p>
	<div style="float: left; width: 630px; height: 800px;">
		<div id="map" class="smallmap"></div>
		<div id="result" class="smallmap"></div>
	</div>
	<div style="float: left; width: 630px; height: 800px;">
		<div id="panel" class="smallmap">
			<input type="radio" name="draw" value="point" id="A01"
				onclick="toggleControl(this)"><label for="A01">画点</label> <input
				type="radio" name="draw" value="line" id="A02"
				onclick="toggleControl(this)"><label for="A02">画线</label> <input
				type="radio" name="draw" value="polygon" id="A03"
				onclick="toggleControl(this)"><label for="A03">画面</label> <input
				type="radio" name="draw" value="cancel" id="A04"
				onclick="toggleControl(this)"><label for="A04">无</label>
		</div>
	</div>

</body>
</html>
